<template>
  <view class="pdf-preview">
      <view v-if="showCollects" class="show_collect_like">
          <image class="like" @click="likeFn(info)"
                 :src="info.like === 1 ? '../static/images/home/heart_fill.png' : '../static/images/home/heart.png'"
                 style="width: 36rpx; height: 32rpx"></image>
          <text v-if="info.likeNumber" class="likeNumber">{{ info.likeNumber }}</text>
          <image class="collection" @click="collectionFn(info)"
                 :src="info.collect === 1 ? '../static/images/start1.svg' : '../static/images/start.svg'"
                 style="width: 36rpx; height: 32rpx"></image>
          <text v-if="info.collectNumber" class="collectNumber">{{ info.collectNumber }}</text>
      </view>
    
      <zmm-watermark :watermark="watermark" :margin="40"></zmm-watermark>
      <image v-if="search" src="../static/images/home/open.svg" class="icon" @click="rightPopup"></image>
      <u-popup :show="show" mode="right" @close="closeFn" @open="openFn" class="keywords">
          <view class="keyword">
              <view class="image">
                  <image src="../static/images/home/close.svg" @click="closeFn"></image>
              </view>
        <view class="content">
          <view class="model model-title">
            <image src="../static/images/home/model-title.svg"></image>
            关键字列表
          </view>
          <view class="scroll_view">
            <view :class="knowledgeIndex == index ? 'active' : ''" class="model" @click="knowledgeFn(item, index)" v-for="(item, index) in items" :key="index"> <image src="../static/images/home/model.svg"></image>{{ item.text }} </view>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 检索结果后处理的问题 -->
    
    <view v-show="highlightedContent != ''" v-html="highlightedContent"  id="highlightedContent" ref="highlightedContent"></view>
    <view v-show="highlightedContent == ''" class="mainContent" ref="mainContent">
      <template v-for="(item, index) in dataInfo.content">
        <view class="h0" v-if="item.tag == 'h0'">
          <view class="title">{{ item.paragraphs[item.paragraphs.length - 1] }}</view>
        </view>
        <view class="h1" v-if="item.tag == 'h1'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text text-indent" v-if="H.node_type == 'paragraph'">
              {{ filterFn(item.paragraphs[H.node_index]) }}
            </view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].pre_node_content && item.images[H.node_index].pre_node_content.startsWith('表') && (!item.images[H.node_index].next_node_content || (item.images[H.node_index].next_node_content && !item.images[H.node_index].next_node_content.startsWith('图')))">{{ imageContents(item.images[H.node_index].pre_node_content) }}</text>
              <image class="text_image" ref="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].next_node_content && item.images[H.node_index].next_node_content.startsWith('图')">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>
        <view class="h2" v-if="item.tag == 'h2'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text text-indent" v-if="H.node_type == 'paragraph'"> {{ filterFn(item.paragraphs[H.node_index]) }}</view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].pre_node_content && item.images[H.node_index].pre_node_content.startsWith('表') && (!item.images[H.node_index].next_node_content || (item.images[H.node_index].next_node_content && !item.images[H.node_index].next_node_content.startsWith('图')))">{{ imageContents(item.images[H.node_index].pre_node_content) }}</text>
              <image class="text_image" ref="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].next_node_content && item.images[H.node_index].next_node_content.startsWith('图')">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>

        <view class="h3" v-if="item.tag == 'h3'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text text-indent" v-if="H.node_type == 'paragraph'"> {{ filterFn(item.paragraphs[H.node_index]) }}</view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].pre_node_content && item.images[H.node_index].pre_node_content.startsWith('表') && (!item.images[H.node_index].next_node_content || (item.images[H.node_index].next_node_content && !item.images[H.node_index].next_node_content.startsWith('图')))">{{ imageContents(item.images[H.node_index].pre_node_content) }}</text>
              <image class="text_image" ref="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].next_node_content && item.images[H.node_index].next_node_content.startsWith('图')">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>

        <view class="h4" v-if="item.tag == 'h4'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text text-indent" v-if="H.node_type == 'paragraph'"> {{ filterFn(item.paragraphs[H.node_index]) }}</view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].pre_node_content && item.images[H.node_index].pre_node_content.startsWith('表') && (!item.images[H.node_index].next_node_content || (item.images[H.node_index].next_node_content && !item.images[H.node_index].next_node_content.startsWith('图')))">{{ imageContents(item.images[H.node_index].pre_node_content) }}</text>
              <image class="text_image" ref="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].next_node_content && item.images[H.node_index].next_node_content.startsWith('图')">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>

        <view class="h5" v-if="item.tag == 'h5'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text text-indent" v-if="H.node_type == 'paragraph'"> {{ filterFn(item.paragraphs[H.node_index]) }}</view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].pre_node_content && item.images[H.node_index].pre_node_content.startsWith('表') && (!item.images[H.node_index].next_node_content || (item.images[H.node_index].next_node_content && !item.images[H.node_index].next_node_content.startsWith('图')))">{{ imageContents(item.images[H.node_index].pre_node_content) }}</text>
              <image class="text_image" ref="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].next_node_content && item.images[H.node_index].next_node_content.startsWith('图')">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>

        <view class="h6" v-if="item.tag == 'h6'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text text-indent" v-if="H.node_type == 'paragraph'"> {{ filterFn(item.paragraphs[H.node_index]) }}</view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].pre_node_content && item.images[H.node_index].pre_node_content.startsWith('表') && (!item.images[H.node_index].next_node_content || (item.images[H.node_index].next_node_content && !item.images[H.node_index].next_node_content.startsWith('图')))">{{ imageContents(item.images[H.node_index].pre_node_content) }}</text>
              <image class="text_image" ref="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].next_node_content && item.images[H.node_index].next_node_content.startsWith('图')">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>
<script>
export default {
  name: "preview",
  data() {
    return {
      show: false,
      showCollects: true,
      knowledgeIndex: -1,
      info: {},
      isSearch: false,
      QA: false,
      html: null,
      items: [],
      search: false,
      keywords: [],
      dataInfo: {},
      albumWidth: 0,
      urls1: [
        {
          src2: "https://cdn.uviewui.com/uview/album/1.jpg",
        },
      ],
      searchKeyword: "顺序",
      keywordIndex: 0,
      highlightedContent: "",
        watermark: this.$store.state.user.id + this.$store.state.user.name
    };
  },
  onLoad(options) {
    // this.info = JSON.parse(decodeURIComponent(options.info));
	  this.info = JSON.parse(options.info);
    if(this.info){
      this.info.like = 0
      this.info.likeNumber = 0
      this.info.collectNumber = 0
      this.info.collect = 0
    }
    console.log(JSON.parse(options.info), this.info, "查看进入的参数");
    this.isSearch = options.isSearch;

    this.showCollects = !options.showCollects;
    this.search = options.search == "true" ? true : false;
    if (this.search == true) {
      this.items = this.info.ext.items;
      this.keywords = this.info.ext.items[0].text.split(",");
      this.knowledgeIndex = 0;

    
    }
    console.log(options.search, this.info, "ffffff");
    this.QA = options.QA;

    this.getPreview();
  },
  computed: {
    // 过滤正文关键字数据
    filterFn() {
      return (params) => {
        const regex1 = /^图(\d+|\s*)/g;
        const regex2 = /^表(\d+|\s*)/g;

        if (regex1.test(params) || regex2.test(params)) {
          return;
        } else {
          return params;
        }
      };
    },
    imageContents() {
      return (item, index) => {
        // const i = index + 1
        // const regex1 = /^图\s/i;
        // const regex2 = /^表\s/i;
        // if (regex1.test(item)) {
        // 	return item.replaceAll('图 ', '图' + i);
        // }
        // if (regex2.test(item)) {
        // 	return item.replaceAll('表 ', '表' + i);
        // }
        return item;
      };
    },
    workflowHeight() {
      let height = document.documentElement.clientHeight || document.body.clientWidth;
      height = (height - 46) * 2;
      return {
        height: height + "rpx",
      };
    },
  },
  mounted() {
    window.previewImage1 = (e) => {
      console.log("ffffff", e);
    };
  },
  methods: {
    collectionFn(item) {
      // console.log(item, "ffff")
      // item.collect = Math.abs(item.collect - 1)
      let url = item.collect === 1 ? "/knowledgeCollect/delete    " : "/knowledgeCollect/add";
      this.$request({
        url: url,
        method: "post",
        data: {
          collectType: "2",
          knowledgeFileId: item.id,
        },
      }).then(({ data }) => {
        if (item.collect === 1) {
          this.$modal.loading("已取消收藏");
          this.info.collect = 0
            this.info.collectNumber--
        } else {
          this.$modal.loading("已收藏");
            this.info.collect = 1
            this.info.collectNumber++
        }

        setTimeout(() => {
          this.$modal.closeLoading();
        }, 1000);
      });
    },
    likeFn(item) {
      let url = item.like === 1 ? "/knowledgeCollect/delete    " : "/knowledgeCollect/add";
      this.$request({
        url: url,
        method: "post",
        data: {
          collectType: "1",
          knowledgeFileId: item.id,
        },
      }).then(({ data }) => {
        if (item.like === 1) {
          this.$toast("取消点赞");
            this.info.like = 0
            this.info.likeNumber--
        } else {
          this.$toast("已点赞");
            this.info.like = 1
            this.info.likeNumber++
        }
        console.log("info===", this.info);
        this.$forceUpdate();
      });
    },
    knowledgeFn(item, index) {
      console.log(item, "");

      // 向页面传参
      // this.$ownerInstance.callMethod('getMessage','123')
      this.knowledgeIndex = index;
      console.log(item, "333");
      this.keywords = item.text.split(",")[0];
      this.keywordsFn();
      console.log("knowledge", this.keywords, index);
    },
    keywordsFn() {
      const pageContent = document.querySelector(".mainContent").innerHTML;
      // const pageContent = this.$refs.mainContent.innerHTML
      console.log("查看对应文本", pageContent);
      this.keywordIndex = pageContent.indexOf(this.keywords);

      const regex = new RegExp(this.keywords, "g");
      this.highlightedContent = pageContent.replace(regex, (match) => {
        return `<uni-text class="highlight" style="color:#008fff">${match}</uni-text>`;
      });

    //   document.querySelector("#highlightedContent").innerHTML = this.highlightedContent;
      console.log("看看这个参数", this.highlightedContent);
      setTimeout(() => {
        document.querySelector(".text_image").onclick = (e) => {
          this.previewImage(e.target.src);
        };
      }, 1000);
      console.log(this.highlightedContent, "fffff");
      if (this.keywordIndex !== -1) {
        this.scrollToKeyword();
      }
    },
    scrollToKeyword() {
      this.$nextTick(() => {
        const element = document.querySelector(".highlight");

        console.log("666666", element);

        if (element) {
          element.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }
      });
    },
    bindEvents() {
      const clickableElements = this.$refs.text_image;
      // clickableElements[0].onclick  =() => {
      //   alert('4444')
      // }

      console.log(clickableElements[0], "dom节点");
      // return
      clickableElements.map((element) => {
        console.log(element.src, "dom节点");
        element.onClick = () => {
          alert("fffff");
        };
        // element.addEventListener('click', this.previewImage(element.src),false);
      });
    },
    previewImage1(e) {
      console.log(e, "ffff");
    },
    previewImage(url) {
      console.log("ffff");
      uni.previewImage({
        current: 0, // 当前显示图片的索引
        urls: [url], // 需要预览的图片列表
      });
    },
    handleCustomEvent() {
      console.log("这是打印url地址");
    },
    btnClick(event) {
      const target = event.target;

      console.log("fff", event, target);
      return;
      // 检查是否点击的是 u-image 组件
      if (target.classList.contains("dynamic-image")) {
        // 获取图片的 URL
        const imageUrl = target.getAttribute("src");
        console.log("点击的图片 URL:", imageUrl);
      }
    },
    rightPopup() {
      console.log("ffff");
      this.show = true;
    },
    closeFn() {
      this.show = false;
    },
    openFn() {
      // this.show = false
    },
    getPreview() {
      this.$modal.loading("正在加载中···");
      let that = this;
      this.$request({
        url: "/knowledgeData/getJson", //    this.QA ? '/file/getUrl' : '/knowledgeData/preview'
        method: "get",
        params: {
          id: this.info.id,
        },
      }).then(({ data }) => {
        if(!data.readAuthority){
          this.$toast("当前文件未发布，不可预览")
          return
        }
        if (this.search) {
          setTimeout(() => {
            this.$nextTick(()=>{
              this.knowledgeFn(this.info.ext.items[0], 0);
            })
          }, data.fileSize < 2 ? 2000  : data.fileSize * 1000);
        }
        console.log("原始数据", JSON.parse(data.videoJson));
        this.$modal.closeLoading();
        that.dataInfo = JSON.parse(data.videoJson);
        // setTimeout(()=>{
        // that.dataInfo.content.map((item) => {
        //   if (item.tag == "h1") {
        //     console.log(item.text, "=====>>>");
        //   }
        // });
        // },1000)

        this.$request({
          url: "/knowledgeData/addView",
          method: "post",
          data: {
            id: this.info.id,
          },
        }).then(({ data }) => {
          this.info.like = data.like
          this.info.likeNumber = data.likeNumber
          this.info.collectNumber = data.collectNumber
          this.info.collect = data.collect
        });
      });
    },
    // populateIframe(iframe, headers, url) {
    //   let xhr = new XMLHttpRequest();
    //   xhr.open("GET", url);
    //   // xhr.responseType = 'blob'
    //   headers.forEach((header) => {
    //     xhr.setRequestHeader(header[0], header[1]);
    //   });
    //   xhr.onreadystatechange = () => {
    //     if (xhr.readyState === xhr.DONE) {
    //       console.log(window.location.href.split("#")[0], "5555");
    //       if (xhr.status === 200) {
    //         // iframe.src = '../static/pdfjs/web/viewer.html?file=' + URL.createObjectURL(xhr.response)
    //         if (this.isSearch) {
    //           // iframe.src = window.location.href.split("#")[0]+'/static/pdfjs/web/viewer.html?keyword=工艺数据&file=' + URL.createObjectURL(
    //           // 	xhr.response)
    //           this.html = xhr.response;
    //         } else {
    //           console.log(xhr, "fffff");
    //           // iframe.src = window.location.href.split("#")[0]+'/static/pdfjs/web/viewer.html?file=' + URL.createObjectURL(xhr
    //           // 	.response)
    //           this.html = xhr.response;
    //         }
    //       }
    //     }
    //   };
    //   xhr.send();
    //   this.$modal.closeLoading();
    //   /*getDocument.promise.then(() => {
    // 		})

    // 		let url = 'path/to/your/pdf.pdf';
    // 		PDFJS.getDocument(url).promise.then(function(pdf) {
    // 		    console.log('PDF内容加载完成')
    // 		    this.$modal.closeLoading()
    // 		}).catch(function(error) {
    // 		    console.error('加载PDF时发生错误: ', error)
    // 		})*/
    // },
  },
};
</script>

<style lang="scss" scoped>
.mainContent {
  counter-reset: h1-counter h2-counter;
}

// .h1 {
//   counter-increment: h1-counter;
//   counter-reset: h2-counter;
// }

// .h2 {
//   counter-increment: h2-counter;
// }

// .h1 .title::before {
//   content: counter(h1-counter) ": ";
// }

// .h2 .title::before {
//   content: counter(h1-counter) "." counter(h2-counter) " ";
// }

.image {
  width: 100%;
  margin: 20rpx 0 0;
}

.legend {
  color: #4c5a67;
  display: flex;
  justify-content: center;
}

.pdf-preview {
  padding: 20rpx;
  background: #fff;
  width: 100%;
  min-height: 100vh;
  position: relative;

  ::v-deep .u-popup__content {
    background: transparent;
  }

  // 设置所有正文的行号
  .content_model {
    line-height: 48rpx;
    color: #1c2126;
    font-size: 30rpx;
  }
  .text-indent {
    text-indent: 2em;
  }
  .h0 {
    .title {
      font-size: 36rpx;
      font-weight: 550;
      color: #1c2126;
      text-align: center;
    }
  }

  .h1 {
    .title {
      font-size: 32rpx;
      font-weight: 550;
      color: #1c2126;
      padding: 40rpx 0 20rpx;
    }

    .content {
      // text-indent: 2em;
    }
  }

  .h2 {
    .title {
      font-size: 30rpx;
      font-weight: 550;
      color: #1c2126;
      padding: 40rpx 0 20rpx;
    }

    .content {
      // text-indent: 2em;
    }
  }

  .h3,
  .h4,
  .h5,
  .h6 {
    .title {
      font-size: 29rpx;
      font-weight: 550;
      color: #1c2126;
      padding: 40rpx 0 20rpx;
    }
  }
}

::v-deep p {
  line-height: 40rpx !important;
  font-size: 26rpx !important;
  font-weight: 400;
  padding: 10rpx;
  text-align: center;
}

// ::v-deep p:nth-child(1) {
// 	font-size: 36rpx;
// 	font-weight: 550;
// 	padding: 30rpx;
// 	text-align: center;
// }

::v-deep img {
  width: 94.5vw;
  // height: 940rpx;
  // margin-left: 25vw;
  //padding: 20rpx 0;
}

::v-deep table {
  border-collapse: collapse;
  /* 合并单元格边框 */
  overflow-x: scroll;
  margin: 20rpx 0 40rpx;
}

::v-deep tr {
  width: auto;
  border: 1px solid #dcdee1;
  /* 设置单元格边框 */
  padding: 8rpx;
  /* 设置单元格内边距 */
}

::v-deep td {
  width: auto;
  border: 1px solid #dcdee1;
  /* 设置单元格边框 */
  padding: 10rpx;
  /* 设置单元格内边距 */
  color: #1c2126;
  font-size: 24rpx;
  background: #f9fbfc;
  word-wrap: break-word;
}

::v-deep th {
  background: #eaecef;
  color: #1c2126;
  font-size: 28rpx;
  border: none;
}

// ::v-deep tr td:nth-child(1){
// 	font-size: 28rpx;
// 	font-size: 500;
// 	// width: 140rpx;
// 	display: block;
// 	background: #EAECEF;
// 	color: #1C2126;
// 	border: none;
// 	}

::v-deep td p {
  font-size: 28rpx;
}

.model {
  width: 434rpx;
  min-height: 80rpx;
  line-height: 80rpx;
  display: flex;
  justify-items: flex-start;
  align-items: center;
  padding: 0 24rpx;
  font-family: 思源黑体;
  font-size: 30rpx;
  word-break: break-all;
  text-align: justify;

  //margin: 24rpx;
  image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 20rpx;
    min-width: 32rpx;
  }

  &.model-title {
    position: relative;
    color: #0084ff;

    //border-bottom: 1rpx solid #D8D8D8;
    &:before {
      content: "";
      width: calc(100% - 48rpx);
      height: 1rpx;
      position: absolute;
      left: 24rpx;
      right: 24rpx;
      bottom: 0;
      background: #d8d8d8;
    }

    &:hover {
      background: #ffffff;
    }
  }

  &.active {
    background: #e8f8ff;
  }

  &:hover {
    background: #e8f8ff;
  }
}

.icon {
  position: fixed;
  right: 0;
  top: calc(50% - 83rpx);
  z-index: 999;
  width: 56rpx;
  height: 166rpx;
}

.keywords {
  ::v-deep .u-popup__content {
    background: transparent;
  }
}

.scroll_view {
  height: calc(100vh - 80rpx);
  overflow-y: auto;
}

.keyword {
  display: grid;
  grid-template-columns: 56rpx 1fr;
  width: 100%;
  height: 100%;

  view.image {
    width: 56rpx;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  view.content {
    background: #ffffff;
  }
}
</style>
